<template>
    <div class="site-head">
        <div class="site-main">
            <div class="logo" title="小米官网">小米官网</div>
            <div class="site-nav">
                <ul class="size-nav-ul">
                    <li class="slide">
                        <span>Xiaomi手机</span>
                    </li>
                    <li class="slide">
                        <span>Redmi 红米</span>
                    </li>
                    <li class="slide">
                        <span>电视</span>
                    </li>
                    <li class="slide">
                        <span>笔记本</span>
                    </li>
                    <li class="slide">
                        <span>平板</span>
                    </li>
                    <li class="slide">
                        <span>家电</span>
                    </li>
                    <li class="slide">
                        <span>路由器</span>
                    </li>
                    <li>
                        <span>服务</span>
                    </li>
                    <li>
                        <span>社区</span>
                    </li>
                </ul>
            </div>
            <div class="site-search">
                <form class="search-form">
                    <input 
                        type="search" 
                        autocomplete="off" 
                        class="search-inner search-focus"
                    >
                    <input 
                        type="submit" 
                        value=""
                        class="search-btn search-focus"
                    >
                </form>
                <div class="search-icon">
                    <a-icon type="search" />
                </div>
            </div>
        </div>
        <HeadNavMenu></HeadNavMenu>
    </div>
</template>

<script>
import HeadNavMenu from './HeadNavMenu';
import '../utils/navmenu';

export default {
    name: 'SiteHead',
    components: {HeadNavMenu}
}
</script>

<style lang="less" scoped>
@import "../assets/less/utils.less";

.site-head {
    width: 100%;
    height: 100px;

    .site-main {
        width: 1226px;
        height: 100%;
        margin: auto;
        display: flex;
        align-items: center;

        .logo {
            width: 56px;
            height: 56px;
            cursor: pointer;
            overflow: hidden;
            .setbg('https://s02.mifile.cn/assets/static/image/logo-mi2.png');
            text-align: left;
            text-indent: -9999em;
        }

        .site-nav {
            width: 595px;
            height: 100%;
            color: #333;
            margin-left: 180px;

            .size-nav-ul {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                padding-top: 50px;

                li {
                    height: 100%;
                    // line-height: 100px;

                    span {
                        padding: 5px;
                        box-sizing: border-box;
                        cursor: pointer;

                        &:hover {
                            color: #ff6700;
                        }
                    }
                }
            }
        }

        .site-search {
            position: relative;
            width: 296px;
            height: 50px;
            margin-left: 99px;

            .search-icon {
                position: absolute;
                z-index: 2;
                top: 0;
                right: 0;
                width: 52px;
                height: 48px;
                color: #616161;
                font-weight: 700;
                pointer-events: none;
                text-align: center;
                line-height: 48px;

                i {
                    font-size: 24px;
                }

            }
            .search-form {
                width: 100%;
                height: 100%;
                display: flex;

                input {
                    border: 1px solid #e0e0e0;
                    height: 48px;
                    outline: none;

                    &.search-inner {
                        width: 245px;
                        padding: 0 10px;
                        box-sizing: border-box;
                        font-size: 14px;
                        line-height: 48px;
                        color: #333;
                    }

                    &.search-btn {
                        flex: 1;
                        background-color: #fff;
                        cursor: pointer;
                        margin-left: -1px;

                        &:hover {
                            background-color: #ff6700;
                            border-color: #ff6700;
                        }
                    }
                }
            }

            &:hover {
                
                input {
                    border-color: #b0b0b0;
                }
            }
        }
    }
}
</style>